<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>用户列表</title>
  <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
  <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
  <script type="text/javascript">
    function deleteUser(element) {
      const uid = element.getAttribute('data-uid');
      const username = element.getAttribute('data-username');

      if (confirm("确定要删除 " + username + " 的记录吗？")) {
        window.location.href = '/shopping/user/delete?uid=' + uid;
      }
    }
  </script>
</head>

<body>
  <div class="panel panel-primary">
    <div class="panel-heading">
      <div th:replace="~{header}">
      </div>
    </div>
  </div>
  <br><br>
  <div class="container">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">用户列表</span></h3>
      </div>
      <div class="panel-body">
        <div>
          <button onclick="location.href='/shopping/user/add';return false;">增加用户记录</button>
          <br><br>
        </div>
        <div class="table table-responsive">
          <table class="table table-bordered table-hover">
            <tbody class="text-center">
              <tr>
                <th>序号</th>
                <th>uid</th>
                <th>姓名</th>
                <th>性别</th>
                <th>地址</th>
                <th>电话号码</th>
                <th>爱好</th>
                <th>删除</th>
              </tr>
              <tr th:each="user,userStat:${allUsers}">
                <td>
                  <span th:text="${userStat.count}"></span>
                </td>
                <td>
                  <a th:href="@{/user/edit(uid=${user.uid})}" th:text="${user.uid}"></a>
                </td>
                <td>
                  <a th:href="@{/user/edit(uid=${user.uid})}" th:text="${user.username}"></a>
                </td>
                <td>
                  <span th:text="${user.ssex}"></span>
                </td>
                <td>
                  <span th:text="${user.mailingaddress}"></span>
                </td>
                <td>
                  <span th:text="${user.phone}"></span>
                </td>
                <td>
                  <span th:text="${user.hobby}"></span>
                </td>
                <td>
                  <a href="#" th:attr="data-uid=${user.uid}, data-username=${user.username}"
                    onclick="deleteUser(this)">删除</a>
                </td>
              </tr>


            </tbody>
          </table>
        </div>

        <!-- 分页导航 -->
        <div class="text-center">
          <nav aria-label="Page navigation" class="d-flex justify-content-center">
            <ul class="pagination">
              <li th:classappend="${currentPage == 1} ? 'disabled'">
                <a th:href="@{|/user/pageList?page=1|}" aria-label="First">
                  <span aria-hidden="true">首页</span>
                </a>
              </li>
              <li th:classappend="${currentPage == 1} ? 'disabled'">
                <a th:if="${currentPage > 1}" th:href="@{|/user/pageList?page=${currentPage - 1}|}"
                  aria-label="Previous">
                  <span aria-hidden="true">上一页</span>
                </a>
                <span th:unless="${currentPage > 1}" th:class="disabled" aria-hidden="true">上一页</span>
              </li>
              <li th:each="i : ${#numbers.sequence(1, totalPages)}" th:classappend="${i == currentPage} ? 'active'">
                <a th:href="@{|/user/pageList?page=${i}|}" th:text="${i}"></a>
              </li>
              <li th:classappend="${currentPage == totalPages} ? 'disabled'">
                <a th:if="${currentPage < totalPages}" th:href="@{|/user/pageList?page=${currentPage + 1}|}"
                  aria-label="Next">
                  <span aria-hidden="true">下一页</span>
                </a>
                <span th:unless="${currentPage < totalPages}" th:class="disabled" aria-hidden="true">下一页</span>
              </li>
              <li th:classappend="${currentPage == totalPages} ? 'disabled'">
                <a th:if="${totalPages > 1}" th:href="@{|/user/pageList?page=${totalPages}|}" aria-label="Last">
                  <span aria-hidden="true">尾页</span>
                </a>
                <span th:unless="${totalPages > 1}" th:class="disabled" aria-hidden="true">尾页</span>
              </li>
            </ul>
          </nav>
        </div>

        <!-- 分页信息 -->
        <div class="row">
          <div class="col-md-6">
            <p th:text="'第' + ${currentPage} + '页 共' + ${totalPages} + '页'"></p>
          </div>
          <div class="col-md-6 text-right">
            <p th:text="'共' + ${totalItems} + '条记录'"></p>
          </div>
        </div>

      </div>
    </div>
  </div>
</body>

</html>